
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <#assign base=request.contextPath  />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="misapplication-tap-highlight" content="no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <meta name="renderer" content="webkit">
    <title>车辆详情</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="${base}/css/mui.min.css">
    <link rel="stylesheet" href="${base}/css/mui.dtpicker.css">
    <link rel="stylesheet" href="${base}/css/mui.picker.css">
    <link rel="stylesheet" type="text/css" href="${base}/Yang/layui/css/layui.css"/>
    <link rel="stylesheet" href="${base}/css/common.css" type="text/css" charset="utf-8" />
    <script src="${base}/Yang/layui/layui.js"></script>
    <script src="${base}/Yang/jquery-1.9.0.min.js"></script>
    <script src="${base}/js/mui.js"></script>
    <script src="${base}/js/mui.dtpicker.js"></script>
    <script src="${base}/js/mui.picker.js"></script>
    <script type="text/javascript" src="${base}/js/zhang.js"></script>
    <style type="text/css">
        .Onecenter{
            text-align: left;
            margin: 10px;
            padding: 5px;
            border-bottom: 5px solid #C7C7CC;
        }
        .layui-elem-quote {
            margin-bottom: 10px;
            padding: 15px;
            line-height: 0px;
            border-left: 5px solid #EC971F;
            border-radius: 0 2px 2px 0;
            background-color: #f2f2f2;
        }
        .Twocenter{
            text-align: left;
            margin: 10px;
            padding: 5px;

        }
        li {
            padding: 0.3em;
            border-bottom: 1px solid #eaeaea;
        }

        li:active {
            background: #f4f4f4;
        }
        .righttwo{
            float: right;
            color: #cccccc;
        }
        .footer{
            text-align: left;
            float: none;
            margin: 5px;
            height: 50px;
            border: 1px solid #F0F0F0;
        }
        .layui-carousel-ind li {
            width: 0px;
            height: 0px;
        }
        .mui-btn-block {
            font-size: 15px;
            display: block;
            width: 100%;
            margin-bottom: 10px;
            padding: 3px 0;
        }
        .content {
            text-align: center;
            padding-top: 0px;
        }
        .layui-btn{
            border-radius: 5px;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 5px 5px;
            width: 132px;
            font-weight: 400;
            line-height: 20px;
            text-align: left;
        }
        .layui-input-block {
            margin-left: 132px;
            min-height: 36px;
        }
    </style>
</head>
<body onselectstart="return false;">
<input type="hidden" id="carId" value="${carId}">
<div id="content" class="content">
    <div class="layui-carousel" id="test2">
        <div carousel-item="" id="imags">
            <#--  <div><img  onclick="toInfo('+"'"+data[i].id+"'"+')" style="width:100%;height: 100%;"src="${base}/weUser/getPhoto?path='+data[i].carImageUrl+'"/></div>
                <div><img style="width:100%;height: 100%;" src="img/u=737580566,908433919&fm=27&gp=0.jpg"/></div>-->
        </div>
    </div>
    <hr/>
    <div class="Onecenter">
        <span style="color: #EC971F;font: '微软雅黑'; font-size: 19px;border: 1px solid #EC971F;padding: 2px;border-radius: 3px">厂家直供</span>
        <span style="font: '微软雅黑'; font-size: 20px;"><a id="carName">....</a> <a id="carType">....</a> <a id="carKm">...</a>  </span>
    </div>
    <hr />
    <div class="Twocenter">
        <blockquote class="layui-elem-quote"> 车辆信息</blockquote>
        <ul id="plist" style="list-style:none;margin:0;padding:0;text-align:left;">
            <li>
                <span class="item">企业名称</span>
                <span class="righttwo" id="ptName"  >初始化中...</span>
            </li>
            <li>
                <span class="item">联系人姓名</span>
                <span class="righttwo" id="callName">初始化中...</span>
            </li>
            <li>
                <span class="item">联系人手机号</span>
                <span class="righttwo" id="callPhone">初始化中...</span>
            </li>
            <li>
                <span class="item">车辆数量</span>
                <span class="righttwo" id="num">初始化中...</span>
            </li>
            <li>
                <span class="item">电子邮箱</span>
                <span class="righttwo" id="callEmal">初始化中...</span>
            </li>
            <li>
                <span class="item">预计取车时间</span>
                <span class="righttwo" id="upcarTime">初始化中...</span>
            </li>
            <li>
                <span class="item">是否需要匹配桩</span>
                <span class="righttwo" id="isCharge">初始化中...</span>
            </li>
            <li>
                <span class="item">是否需要发票</span>
                <span class="righttwo" id="isInvoice">初始化中...</span>
            </li>
            <li>
                <span class="item">是否需要运营证</span>
                <span class="righttwo" id="certificate">初始化中...</span>

            </li>
            <br>
            <div class="layui-inline" style="margin-bottom: -22px;">
                <label class="layui-form-label">输入租车数量</label>
                <div class="layui-input-block">
                    <input id="number" style="height: 30px;width: 111%; padding: 0 10px" name="number" lay-verify="租车数量"  placeholder="请输入租车数量" autocomplete="off" class="layui-input isNull isNum" type="text">
                </div>
            </div>
        </ul>
        <#--<div class="button2">-->
        <#--<button class="layui-btn layui-btn-primary" style=" font-size: 14px; width: 100%;filter:alpha(opacity:30); opacity:0.6;  -moz-opacity:0.9;-khtml-opacity: 0.9">查看全部配置<i class="layui-icon" style="font-size: 18px;">&#xe623;</i></button>-->
        <#--</div>-->

    </div>
    <h4 style="text-align: left;margin: 0px 20px">选择订单时间</h4>
    <div class="mui-content-padded" style="width: 100%;float: left;text-align: center">
        <button style="float: left;width: 45%;margin-right: 10px" id='result' data-options='{"type":"date"}' class=" mui-btn mui-btn-block">开始日期</button>
        <button style="width: 45%" id='ss' data-options='{"type":"date"}' class=" mui-btn mui-btn-block">结束日期 </button>
    </div>
    <hr/>
    <div class="footer">
        <div style="width: 33%;height: 100%;float: left;"><a onclick="phonea()"><img style="height: 100%;width:40% ;" src="${base}/image/1538489230(1).png"/>电话咨询</a></div>
        <button class="layui-btn layui-btn-primary layui-btn-sm" style="height: 100%;border-bottom:none;border-top:none;border-right:none;border-radius: 0px;">
            <i class="layui-icon">&#xe63a;</i>客服
        </button>
        <div style="width: 48%;height: 100%; float: right;text-align: center;"><button class="layui-btn" style="background-color: #9AC747;font-size: 18px;height: 100%; width: 100%;" onclick="rentcar()">立即租车</button>

        </div>
    </div>
</div>

</body>
<script>
    (function($) {

        $.init();

        var result = $('#result')[0];

        var ss = document.getElementById("ss");

        var btns = $('.btn');

        result.addEventListener('tap', function() {

            var optionsJson = this.getAttribute('data-options') || '{}';

            var options = JSON.parse(optionsJson);

            var id = this.getAttribute('id');

            console.log(options);

            var picker = new $.DtPicker(options);

            console.log(picker);

            picker.show(function(rs) {

                result.innerText = rs.text;

                picker.dispose();

            });

        }, false);

        ss.addEventListener('tap', function() {

            var optionsJson = this.getAttribute('data-options') || '{}';

            var options = JSON.parse(optionsJson);

            var id = this.getAttribute('id');

            var picker = new $.DtPicker(options);

            picker.show(function(rs) {

                ss.innerText = rs.text;

                picker.dispose();

            });

        }, false);

    })(mui);
</script>
<script>
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;
        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#test2'
            ,interval: 1800
            ,anim: 'fade'
            ,height: '200px'
            ,width: '100%'
        });
    });
    //加载轮播图片
    InitImags();
    InitContent();
    function InitImags(){
        $.ajax({
            type: "POST",
            url: "${base}/WechatCar/findCarImagesByCarId",
            data:{"carId":$("#carId").val()},
            async:false,

            success: function (data) {
                for (var i= 0;i<data.length;i++){
                    $("#imags").append(
                        '<div><img style="width:100%;height: 100%;" src="${base}/weUser/getPhoto?path='+data[i].url+'"/></div>'
                    );
                }

            }
        });
    }
    function InitContent(){
        var sss=${people_user.id}+'';
        var fff=${pt_user.id}+'';
        if (sss==''&&fff==''){
            var preUrl=window.location.href;
        }

        $.ajax({
            type: "POST",
            url: "${base}/WechatCar/findCarByCarId",
            data:{"carId":$("#carId").val(),"preUrl":preUrl},
            success: function (data) {
                $("#carName").html(data.carName);
                $("#carType").html(data.carType);
                $("#carKm").html("里程："+data.carKm+"Km");
                $("#ptName").html(data.ptName);
                $("#num").html(data.num);
                $("#callName").html(data.callName);
                $("#callPhone").html(data.callPhone);
                $("#callEmal").html(data.callEmal);
                $("#upcarTime").html(timeFormat(data.upcarTime));
                if(data.isCharge==1){
                    $("#isCharge").html("是")
                }else{
                    $("#isCharge").html("否")
                }
                if(data.isInvoice==1){
                    $("#isInvoice").html("是")
                }else{
                    $("#isInvoice").html("否")
                }
                if(data.certificate==1){
                    $("#certificate").html("有")
                }else{
                    $("#certificate").html("没有")
                }




            }
        });
    }
    function rentcar() {
        if (!isNull()) {
            return;
        }
        if (!isNum()) {
            return;
        }

        var date1 = $("#result").text();
        var date2 = $("#ss").text();

        if (date1 != "" && date2 != "") {

            var date1 = new Date($("#result").text());
            var date2 = new Date($("#ss").text());
            $.ajax({
                type: "POST",
                url: "${base}/comUserCarRenting/rentcar",
                data: {
                    "carId": $("#carId").val(),
                    "startime": date1.getTime(),
                    "endtime": date2.getTime(),
                    "number": $("#number").val()
                },
                success: function (data) {
                    if (data == "租车成功") {
                        alert(data)
                        window.location.href = "${base}/WechatCar/index.html"
                    }
                    alert(data);
                }
            })
        }
        if (isNaN(date1) || isNaN(date2)) {
            alert("请输入时间")
        }

    }
    function phonea() {
        alert("请拨打010-8771771")
    }
    function timeFormat(nS) {
        return new Date(parseInt(("/Date("+nS+")/").substr(6, 13))).toLocaleDateString();
    };


</script>
</html>
